<template>
	<div class="body">
		<div class="template">
			<div class="print-box">
				<div class="title">老友部落酸菜鱼(灵泉北里店)</div>
				<div class="title">取单号: 79</div>
				<div class="divider-line"></div>
				<div class="food">
					<div>老坛酸菜鱼+米饭 (套餐)</div>
					<div class="price">x2 ￥30.8</div>
				</div>
				<div class="food">
					<div>金汤肥牛+米饭(套餐)+鸡蛋羹+可乐</div>
					<div class="price">x1 ￥40.58</div>
				</div>
				<div class="food">
					<div>金汤肥牛+米饭(套餐)+鸡蛋羹+可乐</div>
					<div class="price">x1 ￥17.5</div>
				</div>
				<div class="divider-line"></div>
				<div class="order-time">订单金额: 88.88元</div>
				<div class="order-time">下单时间: 2022-02-14 16:29</div>
				<div class="order-time">订单编号: 2147046489879566597</div>
				<div class="divider-line"></div>
				<div class="=desc">备注: 依据餐量提供餐具</div>
				<div class="bottom-bar">
					<div style="margin-top: 30px">.</div>
				</div>
			</div>
			<div class="buttons">
				<el-button type="warning" @click="printTest" round size="small">打印机测试</el-button>
			</div>
		</div>
		<div class="result">
			<div class="printer-list" style="padding-top: 20px">
        <div class="buttons">
          <el-button type="success" @click="getPrinters" round size="mini">获取本机打印机</el-button>
        </div>
				<div class="printer-box">
					<div class="title" v-for="(item,index) in printerList" :key="index">
            <span style="margin-right: 10px">{{index+1}}.</span>
            <span>{{item.name}}</span>
            <span style="color: blue">{{item.isDefault ? '【默认】' : ''}}</span>
          </div>
				</div>
			</div>
			<div class="on-off">
				<div class="printer-box">
<!--					<el-switch v-model="running" active-text="开启打印" inactive-text="关闭打印" @change="runPrinter"></el-switch>-->
				</div>
				<div class="printer-box">
					<el-switch v-model="onvoice" active-text="开启语音" inactive-text="关闭语音"></el-switch>
					<el-button type="primary" plain size="mini" @click="playAudio" style="margin-left: 15px">语音测试</el-button>
					<el-button type="primary" plain size="mini" @click="stopAudio" style="margin-left: 15px">停止</el-button>
					<el-button type="primary" plain size="mini" @click="reloadAudio" style="margin-left: 15px">重播</el-button>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import {defineComponent} from "vue";
const { ipcRenderer } = require("electron")
export default defineComponent({name:'printer'})
</script>
<script setup>
import {ref, onUnmounted, onDeactivated, onMounted} from "vue";
import {ElMessage} from "element-plus";
import Methods from "../utils/Methods";
import mp3 from "../assets/audio/1.mp3"
const printerList = ref([])
const onvoice = ref(false)
let isPrinting = false
let queueList = []

ipcRenderer.on('get-printers', (event, list) => {
	printerList.value = list
  console.log("list",list)
})

const startPrint = () => {
	if(isPrinting === false) {
		//开始新任务
		isPrinting = true
		if (queueList.length > 0) {
			let msg = queueList.splice(0,1)[0]
			// console.log('正在打印------',msg)
			if(onvoice.value === true) {
				reloadAudio()
			}
			let shop_name = `<div class="title">${msg.shop_name} (${msg.table_no} 号桌)</div>`
			let number = `<div class="title">流水号: ${msg.number}</div>`
			let divider = `<div class="divider-line"></div>`
			let pay_price = `<div class="order-time">订单金额: ${msg.pay_price} 元</div>`
			let pay_time = `<div class="order-time">下单时间: ${Methods.formatDate(msg.pay_time)}</div>`
			let pay_order_sn = `<div class="order-time">订单编号: ${msg.pay_order_sn}</div>`
			let desc = `<div class="order-time">备注: ${msg.desc}</div>`
			let detail = ''
			for(let food of msg.detail) {
				detail += `<div class="food"><div class="food-name">${food.food_name}</div><div class="price">x${food.num} ￥${food.total_price}</div></div>`
			}
			let bottom = `<div class="bottom-bar"><div style="margin-top: 30px">.</div></div>`
			let tempalteHtml = `<div class="print-box">`
				+ shop_name + number + divider + detail
				+ divider + pay_price + pay_time
				+ pay_order_sn + divider + desc + bottom + `</div>`

			ipcRenderer.send('do-print', {
				html: tempalteHtml
			})
		}else {
			console.log('任务完成')
			isPrinting = false
		}
	}

}

const printTest = () => {
  if(printerList.value.length === 0) {
    ElMessage.error('未找到打印机')
    return
  }
	let templateHtml =
`
<div class="print-box">
<div class="title">老友部落酸菜鱼(灵泉北里店)</div>
<div class="title">取单号: 79</div>
<div class="divider-line"></div>
<div class="food">
<div class="food-name">老坛酸菜鱼+米饭 (套餐)</div>
<div class="price">x2 ￥30.8</div>
</div>
<div class="food">
<div class="food-name">金汤肥牛+米饭(套餐)+鸡蛋羹+可乐</div>
<div class="price">x1 ￥40.58</div>
</div>
<div class="food">
<div class="food-name">金汤肥牛+米饭(套餐)+鸡蛋羹+可乐</div>
<div class="price">x1 ￥17.5</div>
</div>
<div class="divider-line"></div>
<div class="order-time">订单金额: 220元</div>
<div class="order-time">下单时间: 2022-02-14 16:29</div>
<div class="order-time">订单编号: 2147046489879566597</div>
<div class="divider-line"></div>
<div class="=desc">备注: 依据餐量提供餐具,给老子放辣椒!多放</div>
<div class="bottom-bar">
<div style="margin-top: 30px">.</div>
</div>
</div>
`
	ipcRenderer.send('do-print', {
		// printerName: this.selectedPrinterName,
		html: templateHtml
	})

}
const getPrinters = () => {
	ipcRenderer.send('get-printers')
}
let audio = new Audio(mp3)
const playAudio = () => {
	audio.play()
}
const stopAudio = () => {
	audio.pause()
}
const reloadAudio = () => {
	audio.load()
	audio.play()
}
onDeactivated(() => {
	console.log('printer onDeactivated')
})
onUnmounted(() => {
	console.log('printer onUnmounted')
	audio.pause()
	audio = null
})
getPrinters()

onMounted(() => {
  // setTimeout(() => {
  //   printTest()
  // },10000)
  // setTimeout(() => {
  //   printTest()
  // },20000)
  // setTimeout(() => {
  //   printTest()
  // },30000)
})
</script>

<style scoped lang="scss">
.body {
	display: flex;
	.template {
		width: 260px;
		flex-shrink: 0;
		padding: 35px 15px;
		background-color: #fff;
		.buttons {
			text-align: center;
		}
	}
	.result {
		flex: 1;
		min-width: 400px;
		margin-left: 15px;
		font-size: 14px;
    border-left: 1px solid rgba(200,200,200,0.3);
    padding-left: 15px;
		.printer-box {
			background-color: #fff;
			padding-top: 15px;
			.title {
				display: flex;
        align-items: center;
        margin: 5px;
				.key {
					width: 100px;
				}
			}
		}
		.printer-list {
			margin-bottom: 15px;
		}

	}
}

.print-box {
	font-size: 12px;
}
.print-box div {
	margin: 5px 0;
}
.print-box .divider-line {
	height: 0;
	border-bottom: 1px dotted grey;
}
.print-box .title {
	text-align: center;
}
.print-box .food {
	display: flex;
	justify-content: space-between;
}
.print-box .food .price {
	width: 80px;
	flex-shrink: 0;
	text-align: right;
}
.print-box .bottom-bar {
	text-align: center;
}
</style>
